const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module:{
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      // 写法一：单个loader
      {
        test: /\.(jpg|png|gif)$/,
        // 需要下载file-loader url-loader
        // url-loader依赖file-loader
        loader: 'url-loader',
        options: {
          // 图片小于8kb，转base64（常用于优化）
          // 优点：减少请求
          // 缺点：图片体积变大，文件请求变慢
          limit: 8 * 1024,
          // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
          // 解析时会出问题：[object Module]
          // 解决：关闭url-loader的es6模块化，使用commonjs解析
          esModule: false,
          // 给图片重命名
          // [hash:10]取hash前10位
          // [ext] 取文件原来扩展名
          name: '[hash:10].[ext]'
        }
      },
      // 写法二：多个loader
      // {
      //   test: /\.(jpg|png|gif)$/,
      //   use: [
      //     {
      //       loader: 'url-loader',
      //       options: {
      //         limit: 8 * 1024,
      //       }
      //     }
      //   ]
      // },
      {
        test: /\.html$/,
        // 处理html文件引入img图片（能被url-loader进行处理）
        loader: 'html-loader',
        options: {
          esModule: false
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
}